<template>
    <div>
        <div @click="clickBarChart" class="vue-flow-model">
            <n-icon size="30" color="#18A058">
                <DataFunnel24Regular/>
            </n-icon>
            <Handle id="FunnelChart-inlet" type="target" :position="Position.Left"
                    :is-valid-connection="props.isValidSourcePos"/>
            <Handle id="FunnelChart-export" type="source" :position="Position.Right"
                    :is-valid-connection="props.isValidTargetPos"/>
        </div>
        <span>漏斗图</span>
        <n-drawer v-model:show="active" :width="'80vw'">
            <n-drawer-content>
                <template #header>
                    漏斗图表
                </template>
                <!--展示数据-->
                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div ref="chartDom" style="width: 100%;height:80%;"></div>
                <template #footer>
                    <n-button @click="active=false">完成</n-button>
                </template>
            </n-drawer-content>
        </n-drawer>
    </div>
</template>

<script setup>

import {Handle, Position} from "@vue-flow/core";
import {DataFunnel24Regular} from "@vicons/fluent"
import {useElementsStore} from "@/stores/elements";
import * as echarts from 'echarts';


const props = defineProps(['isValidTargetPos', 'isValidSourcePos', 'id', 'data'])
const elements = useElementsStore()

const clickBarChart = () => {
    active.value = true
    getSuperiorData()
    setTimeout(drawing,1)
}
// 抽屉
const active = ref(false)


const option = ref(null)
let chartDom = ref(null)

const getSuperiorData = () => {
    // 获取上级节点数据
    for (let i of elements.elements) {
        if (i['target'] === props.id) {
            for (let j of elements.elements) {
                if (j.id === i['source']) {
                    props.data.funnel = {...j.data.funnel}
                    return
                }
            }
        }
    }

}
const drawing = () => {
    // 绘图
    option.value =  {
        title: {
            text: '模型漏斗图'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}%'
        },
        toolbox: {
            feature: {

                saveAsImage: {}
            }
        },
        legend: {
            data: props.data.funnel.legend.data
        },
        series: [
            {
                name: '数据',
                type: 'funnel',
                left: '10%',
                top: 60,
                bottom: 60,
                width: '80%',
                min: 0,
                max: 100,
                minSize: '0%',
                maxSize: '100%',
                sort: 'descending',
                gap: 2,
                label: {
                    show: true,
                    position: 'inside'
                },
                labelLine: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    label: {
                        fontSize: 20
                    }
                },
                data: props.data.funnel.data
            }
        ]
    };
    let myChart = echarts.init(chartDom.value);
    console.log(option.value)
    props.data.option = option.value
    option.value && myChart.setOption(option.value);
}
</script>

<style scoped lang="less">
.n-select-one {
    width: 8vw;
}

.n-select-two {
    width: 45vw;
}

.n-space {
    .n-space-span {
        position: relative;
        top: 18%;
    }
}
</style>